<template>
  <span>
    <el-row :gutter="24">
      <template v-for="fi in formItems">
        <el-col v-if="checkHidden(fi)" :key="fi.name" :span="24" :inline="true">
          <!-- 时间、日期 -->
          <el-form-item
            v-if="['date_year', 'date_month', 'date'].includes(fi.type)"
            :label="fi.label"
            :prop="fi.name"
            label-position="right"
            label-width="100px"
          >
            <el-date-picker
              v-model="temp[fi.name]"
              :disabled="checkReadonly(fi)"
              :type="date_type(fi)"
              :placeholder="fi.placeholder"
            />
          </el-form-item>
          <!-- 下拉框 -->
          <el-form-item
            v-else-if="fi.type === 'select'"
            :label="fi.label"
            :prop="fi.name"
            label-position="right"
            label-width="100px"
          >
            <el-select
              v-model="temp[fi.name]"
              :disabled="checkReadonly(fi)"
              :multiple="fi.multiple"
              :filterable="fi.filterable"
              class="filter-item"
              clearable
              :placeholder="fi.placeholder"
              style="width:300px"
              @change="val => handleChange(val, fi)"
            >
              <el-option
                v-for="item in get_options(fi)"
                :key="item.id"
                :label="item.display_name || item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- 级联 -->
          <el-form-item
            v-else-if="fi.type === 'cascader'"
            :label="fi.label"
            :prop="fi.name"
            label-position="right"
            label-width="100px"
          >
            <el-cascader
              v-model="temp[fi.name]"
              :disabled="checkReadonly(fi)"
              class="filter-item"
              :options="get_options(fi)"
              clearable
              :placeholder="fi.placeholder"
            />
          </el-form-item>
          <!-- 下拉框2 -->
          <el-form-item
            v-else-if="fi.type === 'select2'"
            :label="fi.label"
            :prop="fi.name"
            label-position="right"
            label-width="100px"
          >
            <el-select
              v-model="temp[fi.name]"
              :disabled="checkReadonly(fi)"
              class="filter-item"
              clearable
              :placeholder="fi.placeholder"
            >
              <el-option
                v-for="item in get_options(fi)"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- 单选框 -->
          <el-form-item
            v-else-if="fi.type === 'radio'"
            :label="fi.label"
            :prop="fi.name"
            label-position="right"
            label-width="100px"
          >
            <el-radio-group
              v-model="temp[fi.name]"
              :disabled="checkReadonly(fi)"
            >
              <el-radio-button
                v-for="item in get_options(fi)"
                :key="item.value"
                :label="item.value"
              >
                {{ item.name }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <!-- 富文本 -->
          <el-form-item
            v-else-if="fi.type === 'textarea'"
            :label="fi.label"
            :prop="fi.name"
            label-position="right"
            label-width="100px"
          >
            <el-input
              v-model="temp[fi.name]"
              :disabled="checkReadonly(fi)"
              style=" width: 280px;"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              :placeholder="fi.placeholder"
            />
          </el-form-item>
          <!-- 计数器 -->
          <el-form-item
            v-else-if="fi.type === 'number'"
            :label="fi.label"
            :prop="fi.name"
            label-position="right"
            label-width="100px"
          >
            <el-input-number
              v-model="temp[fi.name]"
              :disabled="checkReadonly(fi)"
              :precision="fi.precision !== undefined ? fi.precision : undefined"
              :step="fi.step !== undefined ? fi.step : 1"
              :min="fi.min !== undefined ? fi.min : 0"
              :max="fi.max !== undefined ? fi.max : undefined"
            />
          </el-form-item>
          <!-- 多选框 -->
          <el-form-item
            v-else-if="fi.type === 'checkbox'"
            :label="fi.label"
            :prop="fi.name"
          >
            <el-checkbox v-model="temp[fi.name]" :disabled="checkReadonly(fi)">
              {{ fi.text }}
            </el-checkbox>
          </el-form-item>
          <!-- 输入框 -->
          <el-form-item
            v-else-if="fi.type === 'input'"
            :label="fi.label"
            :prop="fi.name"
            label-position="right"
            label-width="100px"
          >
            <el-input
              v-model="temp[fi.name]"
              :disabled="checkReadonly(fi)"
              style="width:200px"
            />
          </el-form-item>

          <el-form-item
            v-else-if="fi.type === 'image'"
            :label="fi.label"
            :prop="fi.name"
            label-position="right"
            label-width="100px"
          >
            <div>
              <UploadImage
                :field-name="fi.name"
                :image="get_image(fi.name)"
                @onloadend="loadImage1"
              />
              <!-- <img :src="get_image(fi.name)" alt="123123" class="imgs" > -->
            </div>
          </el-form-item>

          <el-form-item v-else :label="fi.label" :prop="fi.name">
            <el-input
              v-model="temp[fi.name]"
              :disabled="checkReadonly(fi)"
              style="width:200px"
            />
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </span>
</template>

<script>
import UploadImage from '@/selfComponents/UploadImage'
import odoo from '@/odooapi'

export default {
  name: 'FilterItems',
  components: { UploadImage },
  props: {
    modelName: { type: String, default: '' },
    childFieldName: { type: String, default: undefined },
    dialogStatus: { type: String, default: 'create' },
    formItems: {
      type: Array,
      default() {
        return []
      }
    },
    temp: {
      type: Object,
      default() {
        return {}
      }
    },
    configs: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      Model: undefined
    }
  },
  computed: {},
  created() {
    this.Model = odoo.env(this.modelName)
  },
  methods: {
    handleChange(value, fi) {
      // console.log('xxxxxxx, handleChange', value, fi)
      if (fi.onChange) {
        const temp = fi.onChange({
          self: this.Model,
          value,
          formItem: fi,
          temp: this.temp
        })

        this.$emit('change', temp)
      }
    },
    get_image(field) {
      //
      // console.log('xxxxxx, get_image', field)
      const image = this.temp[field]
      if (!image) {
        return undefined
      } else {
        const url = `data:image/jpeg;base64,${image}`

        return url
        // 'https://www.w3school.com.cn/i/eg_cute.gif'
      }
    },

    loadImage1(params) {
      const { value, field } = params

      const ss = value.split(';base64,')
      this.temp[field] = ss[1]
    },

    get_options(fi) {
      if (!fi.options_for_select) {
        return fi.options_for_select_init || []
      }

      if (typeof fi.options_for_select !== 'function') {
        return fi.options_for_select
      }

      // options_for_select 选项 若是个函数, 则在 configs 中有定义
      return this.configs.get_options(fi)
    },

    checkHidden(fi) {
      const hidden = fi.hidden && fi.hidden[this.dialogStatus]
      // console.log('xxxxxxx, fi', fi, hidden)

      if (hidden && typeof hidden === 'function') {
        //
        return !this.configs.handleHidden(hidden, fi)
      } else {
        return !hidden
      }

      // return !(fi.hidden && fi.hidden[this.dialogStatus])
    },

    checkReadonly(fi) {
      // return fi.readonly && fi.readonly[this.dialogStatus]
      // console.log('xxxxxxx, fi', fi)
      const readonly = fi.readonly && fi.readonly[this.dialogStatus]
      // console.log('xxxxxxx, fi', fi, readonly)

      if (typeof readonly === 'function') {
        return this.configs.handleReadonly(readonly, fi)
      } else {
        return readonly
      }
    },
    date_type(fi) {
      // return fi.date_type === 'date_year'
      //   ? 'year'
      //   : fi.date_type === 'date_month'
      //     ? 'month'
      //     : 'date'

      if (fi.type === 'date_year') {
        return 'year'
      } else if (fi.type === 'date_month') {
        return 'month'
      } else {
        return 'date'
      }
    }
  }
}
</script>
